<div class="max-w-screen-xl p-5 mx-auto" [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div class="grid grid-cols-1 gap-5 lg:grid-cols-4 sm:grid-cols-2">
		<div
			*ngFor="let n of news"
			class="relative flex items-end justify-start w-full text-left bg-center bg-cover h-96 bg-gray-500"
			style="background-image: url({{ n.url }})"
		>
			<div
				class="absolute top-0 bottom-0 left-0 right-0 bg-gradient-to-b via-transparent"
				[ngClass]="['from' + dark, 'to' + dark]"
			></div>
			<div class="absolute top-0 left-0 right-0 flex items-center justify-between mx-5 mt-3">
				<a
					rel="noopener noreferrer"
					href="#"
					class="px-3 py-2 text-xs font-semibold tracking-wider uppercase"
					[ngClass]="['text' + light, 'bg' + primary600]"
				>
					{{ n.category }}
				</a>
				<div class="flex flex-col justify-start text-center" [ngClass]="['text' + light]">
					<span class="text-3xl font-semibold leading-none tracking-wide">
						{{ n.date }}
					</span>
					<span class="leading-none uppercase">{{ n.month }}</span>
				</div>
			</div>
			<h2 class="z-10 p-5">
				<a
					rel="noopener noreferrer"
					href="#"
					class="font-medium text-md hover:underline"
					[ngClass]="['text' + light]"
				>
					{{ n.title }}
				</a>
			</h2>
		</div>
	</div>
</div>
